<nz-card nzTitle="Yaml生成器" [nzBordered]="true">

  <nz-tabset [(nzSelectedIndex)]="this.tabIndex">
    <nz-tab nzTitle="Files"   >
      <div *ngIf="tabIndex==0">
        <nz-input-group [nzAddOnAfter]="files_del_btn" *ngFor="let item of this.YamlObject.files,let i =index" [nzAddOnBefore]="this.getKeys(item)[0]" >
          <input type="text" nz-input [(ngModel)]="this.YamlObject.files[i][this.getKeys(item)[0]]" />
          <ng-template #files_del_btn >
            <span (click)="this.files.delItem(i)">删除</span>
          </ng-template>
        </nz-input-group>

        <!--    因为要加入的key规定，所以最终只会有一个modal-->
        <div nz-row nzJustify="center">
          <app-add-kv C_title="Files区域参数追加" (nzOnCancel)="this.files.modal=false" (addItem)="this.files.addItem($event)" *ngIf="this.files.modal"></app-add-kv>
          <button (click)="this.files.modal=true" nz-button nzSize="default" nzType="primary">添加</button>
        </div>
      </div >
    </nz-tab>
    <nz-tab nzTitle="game" >
      <div *ngIf="tabIndex==1">
        <nz-divider nzText=""></nz-divider>
        <nz-input-group [nzAddOnAfter]="game_del_btn" *ngFor="let item of this.getKeys(this.YamlObject.game),let i=index"  [nzAddOnBefore]="item" >
          <input type="text" nz-input [(ngModel)]="YamlObject.game[item]" />
          <ng-template #game_del_btn >
            <span (click)="this.game.delItem(item)">删除</span>
          </ng-template>
        </nz-input-group>

        <div nz-row nzJustify="center">
          <app-add-kv C_title="Game配置表" (nzOnCancel)="this.game.modal=false" (addItem)="this.game.addItem($event)" *ngIf="this.game.modal"></app-add-kv>
          <button (click)="this.game.modal=true" nz-button nzSize="default" nzType="primary">添加</button>
        </div>
      </div>
    </nz-tab>
    <nz-tab nzTitle="installer">
      <div *ngIf="tabIndex==2">
        <nz-collapse >
          <nz-collapse-panel [nzExtra]="installer_right"  *ngFor="let item of this.YamlObject.installer,let i =index"  [nzHeader]="installer_header">
            <ng-template #installer_header>
              指令：{{this.getKeys(item)[0]}}
            </ng-template>
            <ng-template #installer_right>
              <button nz-button  nzDanger nzSize="small" (click)="this.installer.delItem(i)">删除</button>
            </ng-template>
            <!--  item=   {exec:{attr1:"123",...}} ,index=索引-->
            <nz-input-group [nzAddOnAfter]="installer_keyobject_del_btn"   [nzAddOnBefore]="son_key"
                            *ngFor="let son_key of this.getKeys(item[this.getKeys(item)[0]]),let som_i=index">

              <textarea nz-input [(ngModel)]="this.YamlObject.installer[i][this.getKeys(item)[0]][son_key]" *ngIf="son_key=='command'" rows="5" type="text" ></textarea>

              <input nz-input [(ngModel)]="this.YamlObject.installer[i][this.getKeys(item)[0]][son_key]" *ngIf="son_key!='command'" type="text" />

              <ng-template #installer_keyobject_del_btn >
                <span (click)="this.installer.delSonItem(i,this.getKeys(item)[0],son_key)">删除</span>
              </ng-template>
            </nz-input-group>
            <div nz-row nzJustify="center">
              <button (click)="installer.sonModal.openModal('Install数组下的'+this.getKeys(item)[0]+'指令',i,getKeys(item)[0])" nzType="primary" nz-button>添加</button>
            </div>
          </nz-collapse-panel>
        </nz-collapse>


        <div>
          <!--      三级数组 键值对 追加 属性-->
          <app-add-kv
            (addItem)="installer.addSonItem($event)"
            *ngIf="installer.sonModal.fi"
            (nzOnCancel)="installer.sonModal.fi=false"
            [C_title]="installer.sonModal.title" >
          </app-add-kv>
        </div>

        <div nz-row nzJustify="center">
          <app-add-kv
            C_title="installer区域参数追加"
            (nzOnCancel)="this.installer.modal=false"
            (addItem)="this.installer.addItem($event)"
            *ngIf="this.installer.modal"></app-add-kv>
          <button (click)="this.installer.modal=true" nz-button nzSize="default" nzType="primary">添加</button>
        </div>
      </div>
    </nz-tab>
    <nz-tab nzTitle="system">
      <div *ngIf="tabIndex==3">
        <nz-collapse >
          <nz-collapse-panel [nzExtra]="system_right"  *ngFor="let key of getKeys(YamlObject.system),let i =index"  [nzHeader]="system_header">
            <ng-template #system_header>
              配置：{{key}}
            </ng-template>
            <ng-template #system_right>
              <button nz-button  nzDanger nzSize="small" (click)="this.system.f.del(key)">删除</button>
            </ng-template>
            <!--        //内容 例如env的简直对开始-->
            <nz-input-group *ngFor="let son_key of this.getKeys(YamlObject.system[key])" [nzAddOnBefore]="system_son_left" [nzAddOnAfter]="system_son_r">
              <ng-template #system_son_left>
                <span
                  nzTooltipTrigger="hover"
                  nz-tooltip [nzTooltipTitle]="son_key">{{son_key|nzEllipsis:10:"..."}}</span>
              </ng-template>

              <ng-template #system_son_r>
                <span (click)="system.s.del(key,son_key)">删除</span>
              </ng-template>
              <input type="text" nz-input [(ngModel)]="YamlObject.system[key][son_key]">
            </nz-input-group>

            <div nz-row nzJustify="center">
              <button nzSize="small" nzType="primary" nz-button (click)="system.s.openModal(key)">添加映射</button>
            </div>

          </nz-collapse-panel>
        </nz-collapse>

        <div>
<!--          key->sonkey->add-->
          <app-add-kv (addItem)="system.s.add($event)" *ngIf="system.s.modal" (nzOnCancel)="system.s.modal=false"></app-add-kv>
        </div>

        <div nz-row nzJustify="center">
          <button nzSize="large" (click)="system.f.modal=true" nz-button nzType="primary">添加Key</button>
          <app-add-kv (addItem)="system.f.add($event)" *ngIf="system.f.modal" (nzOnCancel)="system.f.modal=false" C_title="新增配置"></app-add-kv>
        </div>

      </div>
    </nz-tab>

    <nz-tab nzTitle="wine">
      <div *ngIf="tabIndex==4">
          <div   *ngFor="let key of getKeys(YamlObject.wine),let i =index"  >
            <div *ngIf="isObject(YamlObject.wine[key]) ;else wineNotElse">
              <nz-collapse >
                <nz-collapse-panel  [nzExtra]="wine_right" [nzHeader]="wine_left">
                  <ng-template #wine_left>
                    {{key}}
                  </ng-template>
                  <ng-template #wine_right>
                    <button (click)="wine.f.del(key)" nz-button nzDanger nzSize="small">删除</button>
                  </ng-template>
                  <!--        //内容 例如env的简直对开始-->
                  <nz-input-group *ngFor="let son_key of this.getKeys(YamlObject.wine[key])" [nzAddOnBefore]="wine_son_left" [nzAddOnAfter]="wine_son_right">
                    <ng-template #wine_son_left>
                      <span nzTooltipTrigger="hover" nz-tooltip [nzTooltipTitle]="son_key">{{son_key|nzEllipsis:10:"..."}}</span>
                    </ng-template>
                    <ng-template #wine_son_right>
                      <span (click)="wine.s.del(key,son_key)">删除</span>
                    </ng-template>

                    <input type="text" nz-input [(ngModel)]="YamlObject.wine[key][son_key]">
                  </nz-input-group>
<!--                  ##结束-->
                  <button (click)="wine.s.openModal(key)" nz-button nzSize="small" nzType="primary"> 添加映射</button>
                </nz-collapse-panel>
              </nz-collapse>
            </div>
<!--            else?-->
            <ng-template #wineNotElse>
              <nz-input-group [nzAddOnBefore]="key" [nzAddOnAfter]="wine_Else_delete_btn">
                <ng-template #wine_Else_delete_btn>
                  <span (click)="wine.f.del(key)">删除</span>
                </ng-template>
                <input type="text" nz-input [(ngModel)]="YamlObject.wine[key]">
              </nz-input-group>
            </ng-template>
          </div>

        <div>
          <app-add-kv (addItem)="wine.s.add($event)" C_title="Wine子项" *ngIf="wine.s.modal" (nzOnCancel)="wine.s.modal"></app-add-kv>
        </div>
        <div nz-row nzJustify="center">
          <app-add-kv  (addItem)="wine.f.add($event)" C_title="添加Wine环境配置" *ngIf="wine.f.modal" (nzOnCancel)="wine.f.modal"></app-add-kv>
          <button nz-button nzType="primary" nzSize="large" (click)="wine.f.modal=true"> 添加Key</button>
        </div>
      </div>

    </nz-tab>

  </nz-tabset>

  <nz-divider [nzPlain]="true"  nzDashed nzText="Power By Antd of Angular10"></nz-divider>
</nz-card>

<div nz-row nzJustify="center" style="margin-top: 30px">
  <button (click)="export_yaml()" nzGhost nzType="primary" nz-button nzSize="large"> 编译YAML配置代码</button>

  <textarea *ngIf="this.show_stringify" nz-input  rows="20">
    {{this.stringify}}
  </textarea>
</div>


<nz-modal
  nzTitle="请导入YAML 模板"
  (nzOnCancel)="init.modal=false" (nzOnOk)="init.import_str()" *ngIf="init.modal" [nzVisible]="true" nzOkText="导入" nzCancelText="使用默认模板">
  <ng-container *nzModalContent>
    <textarea nz-input [(ngModel)]="init.v" rows="10"></textarea>
  </ng-container>
</nz-modal>
